<template>
  <div class="cardbox">
    <van-card
      v-for="(item, index) in mains"
      :key="index"
      :price="item.lowPrice"
      :desc="item.areaName"
      :title="item.title"
      :thumb="item.imgUrl"
      @click="cutDetail(item)"
    >
      <template #tags>
        <van-rate v-model="item.score" readonly allow-half color="#FF721E" />
      </template>
      <template #footer>
        <van-button size="mini" @click.stop="showShare = !showShare"
          ><van-icon name="smile-o" />分享一下</van-button
        >
        <van-button size="mini" @click.stop="sec">加入购物车</van-button>
      </template>
    </van-card>
    <van-share-sheet
      v-model:show="showShare"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapMutations, mapState } from 'vuex'
import 'vant/es/toast/style'
import { Toast } from 'vant'
import axios from 'axios'
export default defineComponent({
  computed: {
    ...mapState(['homeData'])
  },
  data() {
    return {
      mains: [],
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' }
      ]
    }
  },
  methods: {
    onSelect() {
      //提示信息
      Toast.success('分享成功')
    },
    sec() {
      return Toast.success('添加成功')
    },
    ...mapMutations('homeData', ['changeDetail']),
    cutDetail(item) {
      this.$router.push({ name: 'fddetail', params: { id: item.itemId } })
      this.$store.commit('homeData/changeDetail', item)
    },
    // 实时更新数据
    updateCity() {
      this.mains = this.homeData.citys
    },
    isshowShare() {
      showShare = !showShare
      console.log(1)
      return false
    }
  },
  created() {
    axios({
      url: 'http://localhost:5000/foodlist',
      method: 'get'
    }).then((res) => {
      this.mains = res.data
    })
  }
})
</script>

<style lang="scss" scoped>
.cardbox {
  margin-bottom: 0.5rem;
}
</style>
